<!-- 文件管理 -->
<template>
  <!-- 上传模块 -->
  <UploadVis @initializeRendering="initializeRendering"></UploadVis>
  <!-- 搜索模块 -->
  <search-compont></search-compont>
  <!-- 图片保存位置 -->
  <div>
    <a-row :gutter="[12, 12]">
      <a-col :span="4" v-for="item in List.fileList" :key="item.id">
        <a-card
          hoverable
          style="width:233px ,height: 300px;"
          @click="handSelectFile(item.id)"
        >
          <template #cover>
            <img
              alt="example"
              :width="210"
              :height="180"
              :src="item.url"
              @click="handclickFile(item.id)"
            />
          </template>
          <a-card-meta :title="item.originalname">
            <template #description>
              <span id="imgList-div"
                >上传时间{{ item.filename }}</span
              ></template
            >
          </a-card-meta>
        </a-card>
      </a-col>
    </a-row>
  </div>

  <!-- 图片的分页器 -->
  <div class="filadminpager">
    <a-pagination
      show-size-changer
      v-model:current="List.fileadmin.page"
      :total="List.fileallnum"
      :defaultPageSize="12"
      show-less-items
      :page-size-options="['8', '12', '24', '36']"
      :show-total="(total) => `总数量 ${total} `"
      @change="onChange"
      @showSizeChange="showSizeChange"
    >
      <template #buildOptionText="props"> {{ props.value }}/页</template>
    </a-pagination>

    <!-- <template #buildOptionText="props">
      <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
      <span v-else>全部</span>
    </template> -->
  </div>
  <!-- 弹出层 -->
  <div>
    <!-- 弹出层组件 -->
    <drawer-com
      title="文件信息"
      v-model:visible="visible"
      @HandDrawer="HandDrawer"
      @HandDelete="HandDelete"
    >
      <div>
        <a-image
          width="550px"
          height="360px"
          :src="List.details?.url"
          placeholder
        />
        <div class="detaill-context">
          <a-row :gutter="[24, 24]">
            <a-col :span="4">文件名称</a-col>
            <a-col :span="18">{{ List.details.originalname }}</a-col>
          </a-row>
          <a-row :gutter="[24, 24]">
            <a-col :span="4">储存路径</a-col>
            <a-col :span="18">{{ List.details.filename }}</a-col>
          </a-row>
          <a-row :gutter="[24, 24]">
            <a-col :span="4">文件类型</a-col>
            <a-col :span="18">{{ List.details.type }}</a-col>
          </a-row>
          <a-row :gutter="[24, 24]">
            <a-col :span="4">访问地址</a-col>
            <a-col :span="18">
              <a-input
                v-model:value="List.details.url"
                placeholder="Basic usage"
              />
            </a-col>
          </a-row>
        </div>
      </div>
    </drawer-com>
  </div>
</template>

<script lang="ts">
interface ListType {
  fileList: any[]
  title: string
  type: string
  fileallnum: any
  titleList: any[]
  typeList: any[]
  flag: boolean
  fileadmin: { page: number; pageSize: number }
  details: any
}
// 文件管理
import { InboxOutlined } from '@ant-design/icons-vue'

import { defineComponent, reactive, onMounted, ref, nextTick } from 'vue'
import { getFileList, getFileDetail, deleteFile, Upload } from '@/api/fileAdmin'
import { Mitt } from '@/utils/mitt'
export default defineComponent({
  components: {
    InboxOutlined
  },
  setup() {
    const List: ListType = reactive({
      //图片数据
      fileList: [],
      //搜索数据
      //搜索数据
      title: '',
      type: '',
      //总文件的数量
      fileallnum: null,
      titleList: [],
      typeList: [],
      //状态
      flag: true,
      //页码和页码的数量
      fileadmin: {
        page: 1,
        pageSize: 12
      },
      //详细的信息
      details: {}
    })
    //请求头
    //点击搜索
    const get_fileList = async () => {
      //调用网络接口的数据
      const result = await getFileList({ ...List.fileadmin })
      // console.log(result.data.data?.[0])

      List.fileList = result.data.data?.[0]
      List.fileallnum = result.data.data?.[1]
    }

    onMounted(() => {
      get_fileList()
    })
    //当上传成功时候
    const upload = () => {
      //调用新的数据
      get_fileList()
    }

    //点击重置的时候
    const reset = () => {
      List.title = ''
      List.type = ''
      get_fileList()
    }
    //弹出层的显示隐藏
    const visible = ref<boolean>(false)
    //重新渲染数据
    // 分页器监听事件
    const onChange = (pageNumber: number) => {
      List.fileadmin.page = pageNumber
      get_fileList()
    }
    //每个图片的点击事件
    const handclickFile = async (id: String) => {
      HandDrawer()
      const result = await getFileDetail({ id: id })
      // console.log(result);
      List.details = result.data.data[0][0]
    }
    //点击关闭按钮
    const HandDrawer = () => {
      visible.value = !visible.value
    }
    //删除按钮
    const HandDelete = async () => {
      const result = await deleteFile(List.details.id)
      HandDrawer()
      get_fileList()
    }
    //页码的切换
    const showSizeChange = (current, size) => {
      List.fileadmin.pageSize = size
      get_fileList()
    }
    const isImageUrl = (file) => {
      return true
    }
    //上传图片重新渲染
    const initializeRendering = (val) => {
      console.log(val)
      get_fileList()
    }
    //每个卡片的点击事件
    const handSelectFile = async (id: String) => {
      const result = await getFileDetail({ id: id })
      List.details = result.data.data[0][0]
      Mitt.emit('clickEventsPerCard',result.data.data[0][0])
    }
    return {
      List,
      upload,
      reset,
      get_fileList,
      onChange,
      handclickFile,
      visible,
      HandDrawer,
      HandDelete,
      showSizeChange,
      isImageUrl,
      initializeRendering,
      handSelectFile
    }
  }
})
</script>
<style>
#imgList-div {
  /* color: aquamarine; */
  display: inline-block;
  /*第一步： 溢出隐藏 */
  overflow: hidden;
  /* 第二步：让文本不会换行， 在同一行继续 */
  white-space: nowrap;
  /* 第三步：用省略号来代表未显示完的文本 */
  text-overflow: ellipsis;
  /*第四步:设置宽度*/
  width: 185px;
}
.filadminpager {
  margin-top: 30px;
  float: right;
}
.detaill-context {
  margin-top: 20px;
  line-height: 50px;
}
.upload {
  width: 100%;
  height: 200px;
  margin: 10px;
}
</style>
